<%--
  Created by IntelliJ IDEA.
  User: CrazyTobis
  Date: 2020-05-11
  Time: 21:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div id="tcjDetail">
    <div class="" id="">
        <div class="row">
            <div class="col-3">
                <input class="form-control "readonly value="入库单号:${vo.receptNo}">
            </div>
            <div class="col-2">
                <input class="form-control "readonly value="入库类型:${vo.name}">
            </div>
            <div class="col-2">
                <input class="form-control "readonly value="单据状态:${vo.result}">
            </div>
            <div class="col-5">
                <input class="form-control "readonly value="入库备注:${vo.remakers}">
            </div>
        </div>
    </div>

    <div id="MyTable">

    </div>
    <div class="alert alert-secondary" role="alert" data-tcj="all" style="color: #0A160A">

    </div>


    <div>
        <div style="top: 0px;
    left: -5px;
    width: 159px;
    height: 30px;
    background: #e2f3ff;
    border-radius: 0 17px 17px 0;
    color: #2397f3;
    text-align: center;
    line-height: 30px;">

            经办信息
        </div>
        <div id="infoTable" style="padding-bottom: 50px"></div>
    </div>





    <div class="modal fade text-center" style="" id="tcjmod"  data-tcj="mod" role="dialog">
        <!--模态框-->
        <div class="modal-dialog" role="document"
             style="top: 25px; left: -100px;">
            <div class="modal-content container card" style="width: 800px; margin: 0 auto;">

                <div class="modal-header" style="">
                    <p style="margin: 0 auto; font-weight: 500; font-size: 18px;">选择商品存放位置</p>
                    <a class="close position-absolute"
                       data-dismiss="modal" aria-label="Close"
                       style="right: 20px;">
                        <span aria-hidden="false">&times;</span>
                    </a>
                </div>

                <div class="modal-body" style="padding: 30px 15px; padding-bottom: 0px;">
                    <%--//这里是表单--%>
                    <form data-tcj="choice">
                        <div class="row">
                            <select name="warehouse"  data-tcj="warehouse" class="cgdd-gys-add col-3 mr-md-3 custom-select form-control offset-1">
                                <option selected hidden value="">请选择仓库</option>




                            </select>

                            <select name="shelves" data-tcj ="shelves"  class="cgdd-gys-add col-3 mr-md-3 custom-select form-control offset-3" >
                                <option selected hidden value="">请选择货架</option>




                            </select>


                        </div>
                        <div class="row mt-5">
                            <div class="col-5 row" style="margin-left: 20px">
                                <label class="col-form-label col" >请输入完好数</label>
                                <input name="complete" data-tcj = "complete" class="form-control  mr-2 col"  placeholder="完好数">

                            </div>
                            <div class=" col-5 row " style="margin-left: 90px">
                                <label class="col-form-label col">请输入破损数</label>
                                <input name="break" data-tcj = "break" class="form-control col" placeholder="破损数">
                            </div>

                        </div>
                    </form>
                    <div class="row" style="margin-top:10px;">
                        <div class="col row justify-content-start">


                        </div>
                    </div>

                    <!--表格的行-->
                    <div class="row">
                        <div class="col " id="tcjAddTable" style="padding: 0;">
                        </div>
                    </div>
                    <%--//这里是按钮--%>

                    <div  data-tcj="click-btn" class="row" >

                    </div>


                </div>


                <div class="modal-footer row justify-content-center">
                    <div class="col">
                        <button class="col-2 btn btn-primary"
                                data-tcj="choicetijiao"
                                type="button"
                                style="margin-left: 20px; height: 37px;">
                            提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <button class="btn btn-outline-danger offset-11" data-tcj="sub">提交</button>
</div>












<script src="${pageContext.request.contextPath}/app-assets/js/tooltip.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/app-assets/js/components-modal.min.js" type="text/javascript"></script>

<script>
    (function () {

        let pageVO = ${pageVO};
        //储存查到的所有商品信息
       // 主要用来储存确认货架的信息
        let datas = pageVO.data;

        //用于储存点击的对象
        let temp;
        //总数
        let totle = 0;
        //完好数
        let good = 0;
        //破损数
        let band = 0;

        for (let i = 0; i<pageVO.data.length;i++){

            let data = pageVO.data[i];
            totle+=data.receptAmount;
            good += data.completeAmount;
            band+=data.brokenAmount;

        }
        let content = "合计：     物品种类: "+pageVO.data.length+ "          物品总数：  "+totle+"       完好品总数：  "+good+"      破损品总数:   "+band;

        $('[data-tcj="all"]').html(content);
        let columns =[{field: "id", title: "编号"},
         {field: "goodsName", title: "物品名称"},
         {field: "receptAmount", title: "入库数量"},
         {field: "completeAmount", title: "商品完好数"},
         {field: "brokenAmount", title: "破损数"},
         {field: "remarks", title: "备注"},
         {field: "shelves", title: "位置"},
         {field: "gys", title: "供应商"},
         {field: "value", title: "尺寸"},
        {field: "name", title: "颜色"}];

        let options={
            pageVO:pageVO,
            node:"#MyTable",
            columns:columns,
            isPaging:false,
            isChecked:true,
            isEdit:true,
            fontAwesome:{'fa fa-search':"确认货架"},
            fontAwesomeClick:{"确认货架":function (event,obj,node,parent,datas) {

                    //先清空之前的option
                    $('[data-tcj ="warehouse"]').find('option').each(function (index,ele) {
                        if(index == 0){
                            return
                        }else {
                            $(ele).remove();
                        }
                    })
                //将点击的完整对象放到temp中
                    //循环找到完整的对象
                    //表单重置
                    $('[data-tcj="choice"]')[0].reset();
                    for (let o of datas){
                        if(o.id == obj.id ){
                            temp = o ;
                            break;
                        }
                    }
                    //弹出模态框
                    //ajax查询出仓库和货架
                    $.get('wareHouse',{"type":"仓库"},function (e) {
                        //循环将仓库的信息拼接上去
                        for (let o of e){
                            //创建一个option的节点
                            let option =  document.createElement("option");
                            //将查询出来的值赋进去
                            $(option).text(o.name);
                            option.value = o.id;
                            //将创建好的option放到对应的select中
                            $('[data-tcj="warehouse"]').append(option);
                        }
                    },'json');
                    //将值添加到input中

                    $('[ data-tcj = "complete"]')[0].value = temp.completeAmount;
                    $('[ data-tcj = "break"]')[0].value = temp.brokenAmount;
                    $('[ data-tcj="mod"]').modal('show');
                }},
            click:function (clickNode,columns,tempDate,nodes) {

                //先清空之前的option
                $('[data-tcj ="warehouse"]').find('option').each(function (index,ele) {
                    if(index == 0){
                        return
                    }else {
                        $(ele).remove();
                    }
                })
                //将点击的完整对象放到temp中
                //表单重置
                $('[data-tcj="choice"]')[0].reset();
                let obj = getObj(clickNode,columns);
                //循环找到完整的对象
                for (let o of datas){
                    if(o.id == obj.id ){
                        temp = o ;
                        break;
                    }
                }
                    //弹出模态框
                //ajax查询出仓库和货架
                $.get('wareHouse',{"type":"仓库"},function (e) {
                    //先清空之前的
                        //循环将仓库的信息拼接上去
                            for (let o of e){
                                //创建一个option的节点
                                let option =  document.createElement("option");
                                //将查询出来的值赋进去
                                $(option).text(o.name);
                                option.value = o.id;
                                //将创建好的option放到对应的select中
                                $('[data-tcj="warehouse"]').append(option);
                            }
                },'json')


                $('[ data-tcj = "complete"]')[0].value = temp.completeAmount;
                $('[ data-tcj = "break"]')[0].value = temp.brokenAmount;
                $('[ data-tcj="mod"]').modal('show');
            }
            


        };
        $.options = options;
        firstTable(options);

        let info =   ${info};

        columns = [{field: "type", title: "流程名称"},
            {field: "name", title: "经办人"},
            {field: "infoTime", title: "提交时间"},
            {field: "remarks", title: "备注"},
            {field: "result", title: "结果"}];

        firstTable({
            datas:info.data,
            columns: columns,
            node:"#infoTable",
            isPaging:false,
            isChecked:false
        });

        //监听选择仓库
        $('[data-tcj="warehouse"]').on('click',function (e) {

             let type =  this.value;
             if(type.trim() == ""){

             }else{
                 //通过选择的仓库查询到该仓库的货架
                 $.get('wareHouse',{"type":"货架","id":type},function (e) {
                     //先清空之前的option
                     $('[data-tcj ="shelves"]').find('option').each(function (index,ele) {
                         if(index == 0){
                             return
                         }else {
                             $(ele).remove();
                         }
                     })
                     //循环将货架的信息拼接上去
                     for (let o of e){
                         //创建一个option的节点
                         let option =  document.createElement("option");
                         //将查询出来的值赋进去
                         $(option).text(o.name);
                         option.value = o.id;
                         //将创建好的option放到对应的select中
                         $('[data-tcj ="shelves"]').append(option);
                     }
                 },'json')
             }
        });

        //监听提交按钮
        $('[data-tcj="choicetijiao"]').on('click',function (e) {
            //获取到表单的数据
            let warehouse  = $('[data-tcj="warehouse"]')[0].value;

            let shelves = $('[data-tcj="shelves"]')[0].value;

            let complete = $('[data-tcj="complete"]')[0].value;
            let breakType =   $('[data-tcj="break"]')[0].value;
            //判断form表单判断用户是否填写正确
           if(warehouse.trim() == ""){
               alert("请选择仓库！");
               return;
           }

           if(shelves.trim() == ""){
               alert("请选择货架");
               return;
           }
           if(complete.trim() == ""){
                alert("请输入商品完好数");
               return;
            }
            if(breakType.trim() == ""){
                alert("请输入商品破损数");
                return;
            }


            if(parseInt(complete) + parseInt(breakType) != temp.receptAmount){
                alert("实际入库数量与输入的数量不匹配!");
                return;
            } else {
                //将这些值存入对象里
                //找出商品的对象
                for (let o of datas){
                    if(o.id == temp.id ){
                        //将值放进去
                            o.completeAmount = complete;
                            o.brokenAmount = breakType;
                            //获取到入库的位置的中文

                     let content  = "";
                        $('[data-tcj="warehouse"]').find(`option`).each(function (index,ele) {
                                if(ele.value == warehouse){
                                    content += $(ele).text();
                                    return false;
                                }
                        });

                        content+=":";

                        $('[data-tcj="shelves"]').find(`option`).each(function (index,ele) {

                            if(ele.value == shelves){
                                content += $(ele).text();
                                return false;
                            }
                        });
                        o.shelves = content;
                        o.warehouseId = parseInt(warehouse);
                        o.shelvesId = parseInt(warehouse);

                    }
                }
            }
            $('[ data-tcj="mod"]').modal('hide');
            //重新渲染表格
            let option = $.options;
            option['datas'] = datas;
            option.pageVO = undefined;
            firstTable(option);

        });
        //监听完好数和破损数的输入

        $('[data-tcj="break"]').on('click',function (e) {

            //获得完好数

            this.value = temp.receptAmount-parseInt($('[data-tcj="complete"]')[0].value);
        });

    //监听提交按钮
        $('[data-tcj="sub"]').on('click',function () {
            //循环获取数据查看是否有未添加仓库和库存的

            for (let o of datas){
                if(o.shelvesId == 0 || o.warehouseId == null){
                        alert("有商品未选择入库位置，请选择！");
                        return;
                }
            }
            swal({
                title: '是否确认入库?',
                text: "",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#0CC27E',
                cancelButtonColor: '#FF586B',
                confirmButtonText: '确认',
                cancelButtonText: "取消"
            }).then(function (isConfirm) {
                //确认入库
                if (isConfirm) {
                    //将数据序列化
                    let obj = JSON.stringify(datas);
                    $.post('requestPut',{"data":obj},function (e) {
                       if(e>0){
                            swal(
                               '提交成功!',
                                '',
                               'success'
                           );
                       }
                       $('').returnMianbao();
                       $('#refreshThisNav').trigger('click');
                    },'json');
                }


            }).catch(swal.noop);
        })
    })();
</script>